<template>
  <lay-container class="!p-[15px] calendarCon">
    <lay-card>
      <lay-row>
        <lay-col :md="18">
          <div class="flex items-center flex-wrap">
            <VCalendar
              v-for="(item, index) in months"
              :key="index"
              color="red"
              :class="isRest ? 'container' : ''"
              :disable-page-swipe="true"
              :initial-page="{ month: item, year: year }"
              :attributes="getAttributes(item)" />
            <!-- <VCalendar />
            <VCalendar />
            <VCalendar />
            <VCalendar />
            <VCalendar />
            <VCalendar />
            <VCalendar />
            <VCalendar />
            <VCalendar />
            <VCalendar />
            <VCalendar /> -->
          </div>
        </lay-col>
        <lay-col :md="6">
          <div class="flex flex-col items-center justify-center">
            <div class="btn work" >工作日</div>
            <div class="btn holiday"  >假日</div>
            <div class="btn festival">节日</div>
            <div class="btn special">特殊</div>

            <div class="btn mt-5" @click="handleSetRestDay">设定周六为假日</div>
            <div class="btn" @click="handleSetRestDay">设定周日为假日</div>
            <div class="btn">重置</div>
            <div class="btn">保存</div>
          </div>
        </lay-col>
      </lay-row>
    </lay-card>
  </lay-container>
</template>

<script setup>
import { reactive, toRefs, onMounted } from 'vue';
import dayjs from 'dayjs';

const data = reactive({
  months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  year: '2024',
  isRest: true,
});

const { months, year, isRest } = toRefs(data);

onMounted(() => {
  months.value.forEach((item, index) => {
    console.log(dayjs(year.value + '-' + item).format('MM'));
  });
});

const handleSetRestDay = ()=>{
  isRest.value = !isRest.value;
}
const getAttributes = (month) => {
  if (!isRest.value) {
    return [];
  }
  const days = []
  const newMonth = dayjs(year.value + '-' + month).format('YYYY-MM');
  const startDay = dayjs(newMonth).startOf('month').format('YYYY-MM-DD');
  const endDay = dayjs(newMonth).endOf('month').format('YYYY-MM-DD');
  const interval = dayjs(endDay).diff(startDay, 'day');

  for (let i = 0; i <= interval; i++) {
    days.push(dayjs(startDay).add(i, 'day').format('YYYY-MM-DD'));
  }
  const restDays =  days.filter((item) => ['6', '0'].includes(dayjs(item).format('d')))
  return [{
    content: 'red',
    dates:restDays
  }];
};

const getCellText = (cell) => {
  // return h('div', { class: 'work', innerHTML: 'hello Vue3' })
  const cellDay = cell.year + '-' + cell.month + '-' + cell.date;
  console.log(cellDay);
  const isRest = dayjs(cellDay).format('d');

  if (['6', '0'].includes(isRest)) {
    return `<div class="holiday">${cell.date}<div>`;
  }
  return `<div class="work">${cell.date}<div>`;
};
</script>
<!-- .vc-container .vc-day-content{
  color: #78a300;
} -->
<style lang="scss">
.container .vc-weekday-1, .container .vc-weekday-7 {
  color: red;
}


.calendarCon {
  .btn {
    width: 200px;
    background: #78a300;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
  }
  .btn + .btn {
    margin-top: 15px;
  }

  .work {
    color: blue;
  }

  .holiday {
    color: red;
  }
  .festival {
    color: pink;
  }
  .special {
    color: orange;
  }
  .btn:hover {
    opacity: 0.8;
  }

  .arco-calendar-cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .calendar {
    width: 400px;
    height: 422px;
  }
}
</style>
